<!DOCTYPE HTML>
<html>
	<head>
		<title>匀速运动</title>
		<meta charset="utf-8">
		<style>
			#div1{
				width:200px;
				height:200px;
				background:red;
				position:absolute;
				top:50px;
				left: 0;
			}
			#div2{
				width:1px;
				height:300px;
				background: #ccc;
				position: absolute;
				top:0;
				left:300px;
			}
			#div3{
				width:1px;
				height:300px;
				background: #ccc;
				position: absolute;
				top:0;
				left:600px;			
			}
		</style>
		<script>
		var timer=null;
			function startMove(target)
			{var oDiv1=document.getElementById('div1');
				clearInterval(timer);
				timer=setInterval(function(){
					var speed=0;
					if(target>oDiv1.offsetLeft)
					{
						speed=7;
					}
					else{
						speed=-7;
					}
					
					if(Math.abs(target-oDiv1.offsetLeft)<7)
					{

						clearInterval(timer);
						oDiv1.style.left=target+'px';
					}
					else{
						oDiv1.style.left=oDiv1.offsetLeft+speed+'px';
					}

				},30);
		}
		</script>
	</head>
	<body>
	<input type="button" value="开始运动" onclick="startMove(300)">
	<input type="button" value="运动到600"  onclick="startMove(600)">
		<div id="div1"></div>
		<div id="div2"></div>
		<div id="div3"></div>
	</body>
</html>